<template>
    <ul>
      <li v-for="column in list" :key="column.id">
        <img :src="column.avatar" :alt="column.title">
        <h5>{{column.title}}</h5>
        <p>{{column.description}}</p>
        <a href="#">进入专栏</a>
      </li>
    </ul>
  </template>

<script lang="ts">
import {defineComponent,PropType} from 'vue'
import {testColumns} from '../store/testData'
// import 'bootstrap/dist/css/bootstrap.min.css'

export interface ColumnProps {
    id: number;
    title: string;
    avatar: string;
    description: string;
}
export default defineComponent({
    name:'ColumnList',
    props:{
        list:{
            type: Array as PropType<ColumnProps[]>,
            required: true
        }
    }
})
</script>





















<!-- <template>
    <div class="row">
      <div v-for="column in columnList" :key="column._id" class="col-4 mb-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body text-center">
            <img
              :src="column.avatar && column.avatar.fitUrl"
              :alt="column.title"
              class="rounded-circle border border-light my-3"
            />
            <h5 class="card-title">{{ column.title }}</h5>
            <p class="card-text text-left">{{ column.description }}</p>
            <router-link :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</router-link>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, PropType, computed } from 'vue'
  import { ColumnProps } from '../store/types'
  import { addColumnAvatar } from '../libs/helper'
  
  export default defineComponent({
    name: 'ColumnList',
    props: {
      list: { 
        type: Array as PropType<ColumnProps[]>,
        required: true
      }
    },
    setup (props) {
      const columnList = computed(() => {
        return props.list.map(column => {
          addColumnAvatar(column, 50, 50)
          return column
        })
      })
      return {
        columnList
      }
    }
  })
  </script>
  
  <style scoped>
  .card-body img {
    width: 50px;
    height: 50px;
  }
  </style>
   -->